Flutter-এ Responsive UI তৈরি করা খুবই গুরুত্বপূর্ণ, বিশেষ করে যখন আপনার অ্যাপ্লিকেশনটি বিভিন্ন ডিভাইস এবং স্ক্রিন সাইজে (যেমন মোবাইল, ট্যাবলেট, ওয়েব, এবং ডেস্কটপ) মানানসই করে প্রদর্শন করতে হবে। Flutter আপনাকে এক্সপ্রেসিভ এবং ফ্লেক্সিবল টুলস প্রদান করে, যা দিয়ে আপনি সহজেই responsive ডিজাইন তৈরি করতে পারেন। নিচে Flutter-এ Responsive UI তৈরির কিছু কৌশল এবং টুলস আলোচনা করা হলো:
Responsive UI তৈরির কৌশল
- MediaQuery ব্যবহার করা
- LayoutBuilder ব্যবহার করা
- Flexible এবং Expanded উইজেট ব্যবহার করা
- AspectRatio এবং FittedBox ব্যবহার করা
- OrientationBuilder ব্যবহার করা
১. MediaQuery ব্যবহার করা
MediaQuery উইজেট ব্যবহার করে আপনি ডিভাইসের স্ক্রিন সাইজ, পিক্সেল ডেনসিটি, এবং ওরিয়েন্টেশন সম্পর্কে তথ্য পেতে পারেন। এটি responsive ডিজাইন তৈরিতে সবচেয়ে সাধারণ এবং শক্তিশালী পদ্ধতি।
import 'package:flutter/material.dart';
class ResponsiveExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
// স্ক্রিনের প্রস্থ এবং উচ্চতা পাওয়ার জন্য MediaQuery ব্যবহার করা হচ্ছে
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(title: Text('Responsive UI Example')),
body: Center(
child: Container(
width: screenWidth * 0.8, // স্ক্রিন প্রস্থের ৮০% নেবে
height: screenHeight * 0.3, // স্ক্রিন উচ্চতার ৩০% নেবে
color: Colors.blue,
child: Center(child: Text('Responsive Container')),
),
),
);
}
}
- MediaQuery এর মাধ্যমে আপনি স্ক্রিন সাইজের ডায়নামিক ভ্যালু পেতে পারেন এবং তা অনুসারে কন্টেন্টের আকার এবং বিন্যাস নির্ধারণ করতে পারেন।
২. LayoutBuilder ব্যবহার করা
LayoutBuilder একটি ফ্লেক্সিবল পদ্ধতি যা প্রাথমিক উইজেটের কনটেইনারের আকার অনুযায়ী উইজেট তৈরি করতে সাহায্য করে। এটি একটি বিল্ডার ফাংশন প্রদান করে, যেখানে আপনি কনটেইনারের প্রস্থ এবং উচ্চতার ওপর ভিত্তি করে উইজেট তৈরি করতে পারেন।
import 'package:flutter/material.dart';
class LayoutBuilderExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('LayoutBuilder Example')),
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
// মোবাইল স্ক্রিনের জন্য ডিজাইন
return Container(
color: Colors.blue,
child: Center(child: Text('Mobile View')),
);
} else {
// ট্যাবলেট বা বড় স্ক্রিনের জন্য ডিজাইন
return Container(
color: Colors.green,
child: Center(child: Text('Tablet/Desktop View')),
);
}
},
),
);
}
}
- LayoutBuilder স্ক্রিনের প্রস্থ অনুযায়ী বিভিন্ন লেআউট তৈরি করতে ব্যবহৃত হয়।
৩. Flexible এবং Expanded ব্যবহার করা
Flexible এবং Expanded উইজেট ব্যবহার করে আপনি কন্টেইনার বা উইজেটের প্রস্থ বা উচ্চতা ডাইনামিকভাবে পরিচালনা করতে পারেন, যা responsive UI তৈরিতে সহায়ক।
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(color: Colors.blue),
),
Expanded(
flex: 1,
child: Container(color: Colors.red),
),
],
)
- এখানে দুইটি কন্টেইনার ব্যবহার করা হয়েছে, যেগুলোর প্রস্থ স্ক্রিন সাইজ অনুযায়ী ডাইনামিকভাবে নিয়ন্ত্রিত হবে।
৪. AspectRatio এবং FittedBox ব্যবহার করা
- AspectRatio: এটি একটি নির্দিষ্ট অনুপাত ধরে রাখতে সাহায্য করে। উইজেটটি স্ক্রিন সাইজ পরিবর্তন হলেও অনুপাত ঠিক রাখে।
- FittedBox: এটি কন্টেন্টকে প্যারেন্ট কন্টেইনারে ফিট করাতে সহায়ক, বিশেষ করে যখন স্ক্রিনের সাইজ ছোট বা বড় হয়।
AspectRatio(
aspectRatio: 3 / 2,
child: Container(color: Colors.orange),
)
- AspectRatio দিয়ে আপনি একটি নির্দিষ্ট প্রস্থ-উচ্চতার অনুপাত সেট করতে পারেন, যা responsive UI তৈরিতে কাজে আসে।
৫. OrientationBuilder ব্যবহার করা
OrientationBuilder উইজেট ব্যবহার করে আপনি স্ক্রিনের ওরিয়েন্টেশন (Portrait বা Landscape) অনুযায়ী লেআউট পরিবর্তন করতে পারেন।
import 'package:flutter/material.dart';
class OrientationBuilderExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Orientation Builder Example')),
body: OrientationBuilder(
builder: (context, orientation) {
if (orientation == Orientation.portrait) {
// Portrait Mode
return Center(child: Text('Portrait Mode'));
} else {
// Landscape Mode
return Center(child: Text('Landscape Mode'));
}
},
),
);
}
}
- OrientationBuilder ব্যবহার করে আপনি UI কে স্ক্রিনের ওরিয়েন্টেশন অনুসারে পরিবর্তন করতে পারবেন।
অন্যান্য গুরুত্বপূর্ণ টুলস ও কৌশল:
- FractionallySizedBox: এটি স্ক্রিনের একটি নির্দিষ্ট অংশে একটি উইজেট রাখতে সহায়ক।
- Responsive Frameworks: আপনি চাইলে Flutter এর প্যাকেজ হিসেবে পাওয়া যায় এমন ফ্রেমওয়ার্ক (যেমন responsive_framework বা flutter_screenutil) ব্যবহার করতে পারেন, যা responsive ডিজাইন আরও সহজ করে তোলে।
- Responsive Widgets: কিছু উইজেট যেমন Wrap, GridView, Expanded ইত্যাদি উইজেটগুলো responsive লেআউট তৈরিতে সহায়ক।
Responsive UI এর জন্য সাধারণ টিপস:
- স্ক্রিন সাইজ অনুযায়ী স্টাইল পরিবর্তন: বিভিন্ন স্ক্রিন সাইজে UI কে মানানসই করতে হলে প্রস্থ এবং উচ্চতার অনুপাত ব্যবহার করুন।
- Flex এবং Expanded উইজেট ব্যবহার করুন, যাতে চাইল্ড উইজেটগুলো ডাইনামিকভাবে সাইজ পায়।
- স্ক্রিনের ওরিয়েন্টেশন (Portrait/ Landscape) পরিবর্তন হলে লেআউট সামঞ্জস্য করতে OrientationBuilder ব্যবহার করুন।
- স্ক্রিন সাইজ অনুযায়ী টেক্সট এবং ইমেজের সাইজ সামঞ্জস্য করুন, যাতে ছোট এবং বড় স্ক্রিন উভয় ক্ষেত্রেই টেক্সট এবং ইমেজ স্পষ্ট দেখা যায়।
উদাহরণ: Responsive Layout তৈরির জন্য একটি সম্পূর্ণ কোড
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Responsive Layout Example')),
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
// মোবাইল ভিউ
return Column(
children: [
Container(height: 100, color: Colors.blue),
Container(height: 100, color: Colors.green),
],
);
} else {
// ট্যাবলেট বা ডেস্কটপ ভিউ
return Row(
children: [
Expanded(child: Container(color: Colors.blue, height: 200)),
Expanded(child: Container(color: Colors.green, height: 200)),
],
);
}
},
),
),
);
}
}
এইভাবে, Flutter-এ MediaQuery, LayoutBuilder, এবং অন্যান্য responsive টুলস ব্যবহার করে আপনি একটি শক্তিশালী এবং ব্যবহারবান্ধব responsive UI তৈরি করতে পারবেন।
Read more
